<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code-TobDeng</title>
    <link rel="shortcut icon" href="./imager/code library.png" type="icon"></link>
    <link rel="stylesheet" href="./style.css">
    <style>
        body{
            background-color: #f4f2f168;
        }
        .header{
            height: 80px;
            background-color: white;
        }
        a{
            padding-bottom: 6px;
            color: #565e6c;
            font-size: 20px;
            font-weight: 700
        }
        a:hover,
        .Code{
            color: #373a40;
            border-bottom: #ff5500da 2.5px solid;
        }
        ul{
            width: 75%;
            line-height: 80px;
            display: flex;
            justify-content: flex-end;
            gap: 40px;
        }
        .name{
            text-align: center;
            font-size: 30px;
        }
        .name h1{
            font-size: 200%;
            margin-top: 70px;
            margin-bottom: 20px;
            font-weight: 600;
            display: inline-block;
        }
        .name .color:hover:before {
        width: 100%;
        }
        .name .color:before {
            margin-top: 70px;
            content: ""; 
            position: absolute;
            left: 0;
            width: 0;
            height: 2px;
            background-color: rgb(255, 111, 1);
            transition: width 0.3s;
}
        .name .color{
            position: relative;
            display: inline-block;
            font-size: 55px;
            background: linear-gradient(to right, rgb(242, 44, 44), rgb(255, 111, 1));-webkit-background-clip: text;
            color: transparent;
            text-align: center;
        }
        .icon-1,
        .icon-1:hover,
        .icon-2,
        .icon-2:hover{
            border-bottom: #ff5500da 0px solid;
        }
        .icon-3{
            margin-bottom: 20px;
            color: rgb(255, 111, 1);
            transition: all 1.5s;
        }
        .icon-3:hover{
            transform: rotate(360deg);
            transition: all 1。5s;
        }

        /* Music */
        .container {
            margin: 0 auto;
            text-align: center;
            max-width: 300px;
            background-color: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        .song-info img {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        .song-info h2 {
            font-size: 18px;
            color: rgb(23, 23, 23);
            margin-bottom: 10px;
        }
        .song-info p {
            font-size: 14px;
            color: rgb(57, 55, 53);
            margin-bottom: 15px;
        }
        .custom-player {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 15px;
        }
        .custom-player button {
            background-color: transparent;
            border: none;
            width: 50px; /* 调整按钮大小 */
            height: 50px; /* 调整按钮大小 */
            cursor: pointer;
            transition: transform 0.3s ease;
            padding: 0;
        }
        .custom-player button:hover {
            transform: scale(1.1);
        }
        .custom-player button:focus {
            outline: none;
        }
        .custom-player img {
            width: 100%; /* 图标适应按钮大小 */
            height: 100%; /* 图标适应按钮大小 */
        }
        .progress-bar {
            flex-grow: 1;
            height: 5px;
            background-color: #ddd;
            border-radius: 5px;
            margin: 0 10px;
            position: relative;
        }
        .progress-bar-fill {
            height: 100%;
            background-color: rgb(242, 44, 44);
            width: 0;
            border-radius: 5px;
        }
        .play-button {
            margin-top: 15px;
            padding: 10px 20px;
            background-color: rgb(242, 44, 44);
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        .play-button:hover {
            background-color: rgb(255, 111, 1);
        }
        audio {
            display: none; /* 隐藏默认播放器 */
        }
    </style>
</head>
<body>
        <div class="header">
            <ul>
                <li><a href="./index.html">Home</a></li></li>
                <li><a href="./apps.html">Apps</a></li></li>
                <li><a href="#code" class="Code">Code</a></li></li>
                <li><a href="./about.html">About</a></li></li>
                <li><a class="icon-1" href="#rss"><svg style="width: 1.5em;height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3499"><path d="M763.904 921.6l157.696 0c0-444.416-367.616-806.4-819.2-806.4l0 154.624c364.544 0 661.504 292.352 661.504 651.776zM485.376 921.6l157.696 0c0-293.376-242.688-532.48-540.672-532.48l0 154.624c102.4 0 198.144 39.424 270.848 110.592 72.192 71.168 112.128 166.4 112.128 267.264zM211.456 920.576c59.904 0 109.056-47.616 109.056-107.008 0-58.88-49.152-107.008-109.056-107.008-60.416 0-109.056 48.128-109.056 107.008 0 59.392 48.64 107.008 109.056 107.008z" p-id="3500"></path></svg></a></li>
                <li><a class="icon-2" href="#email"><svg class="icon" style="width: 1.8em;height: 1.8em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4722"><path d="M887.044 267.194H135.36c-39.56 0-71.631 32.07-71.631 71.632v463.536c0 39.561 32.07 71.632 71.631 71.632h751.685c39.561 0 71.632-32.07 71.632-71.632V338.826c0-39.562-32.07-71.632-71.632-71.632z m12.733 100.255v406.715c0 0.039-0.003 0.077-0.003 0.116L683.68 580.338l216.097-212.89zM383.103 620.616c70.996 50.776 191.38 54.63 258.105 0.748L857.07 815.095H166.406l216.697-194.48z m471.412-294.523l-218.34 215.055c-77.786 80.175-179.434 75.4-252.906-1.627L171.962 326.093h682.553z m-731.889 40.932c0-2.023 0.153-4.01 0.436-5.953l216.892 219.127-217.3 195.023c-0.01-0.353-0.027-0.704-0.027-1.058V367.025z" p-id="4723"></path></svg></a></li>
            </ul>
        </div>
        <div class="name">
            <h1>Code</h1> <a style="border-bottom: #ff5500da 0px solid;" href="https://github.com/TobDeng0"><h1 class="color">Github</h1></a> <svg class="icon-3" style="width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4825"><path d="M377.558543 489.629503l67.034742 66.925249-134.025483 133.787052-67.014276-66.838268L377.558543 489.629503zM556.630988 690.733731l223.376487 0 0-89.436962L556.630988 601.296769 556.630988 690.733731zM958.70846 243.936755l0 536.105001c0 98.730629-79.927377 178.744987-178.700985 178.744987L243.903497 958.786743c-98.599645 0-178.61298-80.013335-178.61298-178.744987L65.290517 243.936755c0-98.730629 80.013335-178.722474 178.61298-178.722474l536.105001 0C878.781082 65.213257 958.70846 145.205103 958.70846 243.936755zM869.44546 288.612257c0-74.015737-60.119239-133.981481-134.113487-133.981481L288.578999 154.630776c-73.994248 0-134.027529 59.965743-134.027529 133.981481l0 446.775486c0 74.015737 60.033281 133.961014 134.027529 133.961014l446.752973 0c73.994248 0 134.113487-59.945277 134.113487-133.961014L869.44546 288.612257zM243.553527 355.842451l134.005017 133.787052 0.021489-0.021489 67.01223 66.946738 67.100234-66.946738L310.567803 289.00623 243.553527 355.842451z" p-id="4826"></path></svg>
        </div>


        <div class="container">
            <div class="song-info" id="song-info">
                <p>Tap the button to get random songs</p>
            </div>
            <button class="play-button" onclick="fetchRandomSong()">Get random music</button>
            <div class="custom-player" id="custom-player">
                <!-- 自定义播放器按钮和进度条在获取歌曲后才显示 -->
            </div>
        </div>
    
        <script>
        let audio;
        let isPlaying = false;

        // 恢复音乐播放状态
        window.onload = function() {
            const savedSong = localStorage.getItem('currentSong');
            const savedIsPlaying = localStorage.getItem('isPlaying');
            const savedCurrentTime = localStorage.getItem('currentTime');

            if (savedSong) {
                audio = new Audio(savedSong);
                audio.currentTime = savedCurrentTime ? parseFloat(savedCurrentTime) : 0;

                const songInfoDiv = document.getElementById('song-info');
                songInfoDiv.innerHTML = `
                    <img src="${localStorage.getItem('songImg')}" alt="封面">
                    <h2>${localStorage.getItem('songName')}</h2>
                    <p>${localStorage.getItem('songArtist')}</p>
                `;

                const customPlayerDiv = document.getElementById('custom-player');
                customPlayerDiv.innerHTML = `
                    <button id="play-pause-btn">
                        <img src="./imager/play.png" alt="播放">
                    </button>
                    <div class="progress-bar">
                        <div class="progress-bar-fill" id="progress-bar-fill"></div>
                    </div>
                `;

                const playPauseBtn = document.getElementById('play-pause-btn');
                const progressBarFill = document.getElementById('progress-bar-fill');

                playPauseBtn.addEventListener('click', function() {
                    if (!isPlaying) {
                        audio.play();
                        playPauseBtn.innerHTML = '<img src="./imager/pause.png" alt="暂停">';
                        localStorage.setItem('isPlaying', 'true');
                    } else {
                        audio.pause();
                        playPauseBtn.innerHTML = '<img src="./imager/play.png" alt="播放">';
                        localStorage.setItem('isPlaying', 'false');
                    }
                    isPlaying = !isPlaying;
                });

                audio.addEventListener('timeupdate', function() {
                    const progress = (audio.currentTime / audio.duration) * 100;
                    progressBarFill.style.width = `${progress}%`;

                    // 更新当前播放时间到 localStorage
                    localStorage.setItem('currentTime', audio.currentTime);
                });

                if (savedIsPlaying === 'true') {
                    audio.play();
                    playPauseBtn.innerHTML = '<img src="./imager/pause.png" alt="暂停">';
                    isPlaying = true;
                }
            }
        };

        async function fetchRandomSong() {
            // 如果有正在播放的歌曲，暂停并重置
            if (audio) {
                audio.pause();
                audio.currentTime = 0;
                isPlaying = false;
                document.getElementById('play-pause-btn').innerHTML = '<img src="./imager/play.png" alt="播放">';
            }

            const response = await fetch('https://api.cenguigui.cn/api/netease/');
            const data = await response.json();

            if (data.code === 200) {
                const songInfoDiv = document.getElementById('song-info');
                songInfoDiv.innerHTML = `
                    <img src="${data.data.img}" alt="封面">
                    <h2>${data.data.song_name}</h2>
                    <p>${data.data.artist}</p>
                `;

                audio = new Audio(data.data.play_url);
                const customPlayerDiv = document.getElementById('custom-player');
                customPlayerDiv.innerHTML = `
                    <button id="play-pause-btn">
                        <img src="./imager/play.png" alt="播放">
                    </button>
                    <div class="progress-bar">
                        <div class="progress-bar-fill" id="progress-bar-fill"></div>
                    </div>
                `;

                const playPauseBtn = document.getElementById('play-pause-btn');
                const progressBarFill = document.getElementById('progress-bar-fill');

                playPauseBtn.addEventListener('click', function() {
                    if (!isPlaying) {
                        audio.play();
                        playPauseBtn.innerHTML = '<img src="./imager/pause.png" alt="暂停">';
                        savePlaybackState(data.data.play_url, data.data.img, data.data.song_name, data.data.artist);
                    } else {
                        audio.pause();
                        playPauseBtn.innerHTML = '<img src="./imager/play.png" alt="播放">';
                        localStorage.setItem('isPlaying', 'false');
                    }
                    isPlaying = !isPlaying;
                });

                audio.addEventListener('timeupdate', function() {
                    const progress = (audio.currentTime / audio.duration) * 100;
                    progressBarFill.style.width = `${progress}%`;

                    // 更新当前播放时间到 localStorage
                    localStorage.setItem('currentTime', audio.currentTime);
                });

                // 播放新歌时保存所有信息
                savePlaybackState(data.data.play_url, data.data.img, data.data.song_name, data.data.artist);
            } else {
                alert('获取歌曲失败，请稍后重试。');
            }
        }

        function savePlaybackState(url, img, name, artist) {
            localStorage.setItem('currentSong', url);
            localStorage.setItem('songImg', img);
            localStorage.setItem('songName', name);
            localStorage.setItem('songArtist', artist);
            localStorage.setItem('isPlaying', 'true');
            localStorage.setItem('currentTime', audio.currentTime);
        }
        </script>
</body>
</html>